<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>auto height expansion</title>
    <link rel="stylesheet" href="./style.css" type="text/css" />
  </head>
  <body>
    <div class="wrap">
      <h4>内容较多时</h4>
      <div class="section">
        <input type="checkbox" class="content-check" name="c1" id="c1" hidden />
        <div class="content">
          <pre class="text">
.content{
        width: 500px;
        max-height: 200px;
        overflow: hidden;
        outline: 1px dashed;
        }
.content label{
        float: right;
        width: 100px;
        text-align: center;
        position: relative;
        left: calc(50% - 50px);
        transform: translateY(-100%);
        cursor: pointer;
        }
            </pre
          >
          <label for="c1" class="btn"></label>
        </div>
      </div>
    </div>
    <div class="wrap">
      <h4>内容较少时</h4>
      <div class="section">
        <input
          type="checkbox"
          class="content-check"
          name="ckb"
          id="c2"
          hidden
        />
        <div class="content">
          <pre class="text">
body{
    line-height: 2;
    white-space: pre-wrap;
    font-family: cursive;
    }
                </pre
          >
          <label for="c2" class="btn"></label>
        </div>
      </div>
    </div>
  </body>
</html>
